<template>
  <div class="tmindex">
 
      <el-form :inline="true"   size="mini" class="demo-form-inline">
        <el-form-item label="日期">
          <el-date-picker
                    v-model="selTime"
                    type="daterange"
                    range-separator="-"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
        </el-form-item>
        <el-form-item label="所属学科">
          <el-select v-model="subject" placeholder="请选择" multiple>
              <el-option
                v-for="item in subjectTM"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="考试类型">
        <el-select v-model="examType" placeholder="请选择" multiple>
              <el-option
                v-for="item in examTypeTM"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
        </el-form-item>

       <el-form-item label="学段">
       <el-select v-model="level" placeholder="请选择" multiple>
              <el-option
                v-for="item in levelTM"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
        </el-form-item>

       <el-form-item label="地区">
                <el-select
                  v-model="area"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入地区"
                  :remote-method="remoteMethod"
                  multiple
                  >
                 <el-option
                    v-for="item in addressTM"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>   
       </el-form-item>

       <el-form-item label="题目类型">
        <el-select v-model="questionType" placeholder="请选择">
              <el-option
                v-for="item in questionTypeTM"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
       </el-form-item>


        <el-form-item>
          <el-button type="primary"  size="mini" @click='onserch' >查询</el-button>
           <el-button
            size="mini"
            icon="el-icon-refresh-right" @click='regest' >重置</el-button>
        </el-form-item>
      </el-form>



      <div class='SJlogoout' style='margin-top:30px;'>
          <el-button-group>
            <el-button type="primary" @click='onlineOrOfflines(1)' icon="el-icon-caret-top" size="mini">上线全部</el-button>
            <el-button type="primary" @click='onlineOrOfflines(0)'  icon="el-icon-caret-bottom" size="mini">下线全部</el-button>
          </el-button-group>
     </div>
      <!--表单部分-->
       <el-row class='mr30'>
        <el-table
          
            :data="list"
            stripe
            ref="tableData"
             @row-click="singleElection"
            @cell-mouse-enter="thisclick"
            style="width: 100%"
            row-key="id"
            border
            lazy
            indent="20"
           :load="load"
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            @select="handleSelectionChange">
          
         <el-table-column align='center'>
            <template slot-scope="scope">
               <el-radio class="radio" v-model="radio" :label="scope.row.id">&nbsp;</el-radio>
           </template>
          </el-table-column>

            
          <el-table-column  align='center'
            prop="name"
            label="知识点名称"
            width="180">
           
          </el-table-column>
          <el-table-column  align='center'
            prop="pointNum"
            label="知识点数量"
            
            width="180">
          </el-table-column>
          <el-table-column  align='center'
            prop="editorNum"
            label="编辑中">
          </el-table-column>
          <el-table-column  align='center'
            prop="checkNum"
            label="校验中">
          </el-table-column>
          <el-table-column  align='center'
            prop="reviewNum"
            label="审核中">
          </el-table-column>
           <el-table-column  align='center'
            prop="completeReviewNum"
            label="已审核">
          </el-table-column>
          <el-table-column  align='center'
            prop="qualifiedCompleteNum"
            label="已抽检">
          </el-table-column>
           <el-table-column  align='center'
            prop="address"
            label="操作">
            <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="opdetail">查看</el-button>
          </template>
          </el-table-column>
        </el-table>
      </el-row>
    <el-row class="page">
      <div class="topbox" v-show='isshow' style='    text-align: center;'>
         <p>知识点数：{{getstatisticsList.pointNum}}个 &nbsp;&nbsp; 编辑中：{{getstatisticsList.editorNum}}题&nbsp;&nbsp; 校验中：{{getstatisticsList.checkNum}}题 &nbsp;&nbsp;审核中：{{getstatisticsList.reviewNum}}题&nbsp;&nbsp; 已审核：{{getstatisticsList.completeReviewNum}}题&nbsp;&nbsp; 已抽检：{{getstatisticsList.qualifiedCompleteNum}}题</p>
      </div>
   </el-row>  
     
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import __Config from '../../api/config';//实际路径
export default {
  name: "index",
  data() {
    return {
    
        selTime:[], //时间
        subjectTM:[], //Array 所属学科
        subject:[],
        examTypeTM:[], //Array 考试类型
        examType:[],
        levelTM:[], //Array 学段
        level:[],
        questionType:[],//题目类型
        questionTypeTM:[],
        // paperType:"",//试卷类型
        // paperTypeTM:[],
        area:[],//Array 地区
        addressTM:[],
        parentId:0,//ID
        StarData:"",
        endData:"",
        thisid:null,
        list: [],
        multipleSelection:[],
        ids:[],//选择的ID
        getstatisticsList:[], //知识点统计
        isshow:false,//知识点限时
        radio: null, //单选的值
    };
  },
 
  created() {
     this.onserch();
     this.getserchinfo();
    this.getstatisticsData();
  },
  methods: {
    
  singleElection (event) {
     
      this.radio = event.id;
   
  },
     //全选
    handleSelectionChange(val){
           console.log(val)
        this.multipleSelection= val;
     },
     //查看
    opdetail(){
     this.$router.push({
            path: '/indedetail', 
            name: 'indedetail',
            params: { 
                id: this.thisid, 
               
            }
        })

    },
    thisclick(e){
     this.thisid = e.id;
    
    },
 //查询条件
        getserchinfo(){
             this.$axios({
              method:'get',
              url: __Config.api.getTMserch,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{ }
              }).then((res)=>{   
                 this.subjectTM= res.data.data.subject;// Array 所属学科
                 this.examTypeTM = res.data.data.examType;//Array 考试类型
                 this.levelTM = res.data.data.level;//Array 学段
                 this.questionTypeTM = res.data.data.questionType;//Array 题⽬类型
                 this.paperTypeTM = res.data.data.paperType;//Array 题⽬状态  
               
              }).then((err)=>{
                  console.log(err)
              })
        },

     //懒加载
     load(tree, treeNode, resolve) {
       
        if(tree.hasChildren){
          var times = this.selTime;
          this.StarData  = times[0];
          this.endData = times[1];
           this.$axios({
              method:'post',
              url: __Config.api.getTMDtat,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                  
                    parentId:tree.id
              },
              data:{
                startTime:this.StarData,
                endTime:this.endData,
                subject:this.subject,//Array 否 所属学科(key)
                examType:this.examType,//Array 否 考试类型(key)
                level:this.level,//Array 否 学段(key)
                area:this.area,//Array 否 地区(key)
                questionType:this.questionType ,//Array 否 题⽬类型(key)
               // paperType:this.paperType ,//string 试卷类型

              }
              }).then((res)=>{
                   resolve(res.data.data);
              }).then((err)=>{
                  console.log(err)
              })

        }else{
          alert('没有下级了')
        }

      },

     //查询
        onserch(){
           let options={
             background:"rgba(0, 0, 0, 0.8)",
             text:"加载中"
           }
           let loadingInstance = Loading.service(options);
         if(this.selTime==null){
           this.selTime= [];
           this.StarData="";
           this.endData="";
         }else{
           var times = this.selTime;
           this.StarData  = times[0];
           this.endData = times[1];
         }
           this.$axios({
              method:'post',
              url: __Config.api.getTMDtat,
              headers: {
                "Content-Type":"application/json;",
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
                    parentId:this.parentId
              },
              data:{
                startTime:this.StarData,
                endTime:this.endData,
                subject:this.subject,//Array 否 所属学科(key)
                examType:this.examType,//Array 否 考试类型(key)
                level:this.level,//Array 否 学段(key)
                area:this.area,//Array 否 地区(key)
                questionType:this.questionType ,//Array 否 题⽬类型(key)
               // paperType:this.paperType ,//string 试卷类型
              }
              }).then((res)=>{
                  // console.log(res)
                   loadingInstance.close();
                   this.list = res.data.data;
              }).catch((err)=>{
                  loadingInstance.close();
                  this.$message({
                  message: err,
                  type: 'warning'
                });
              })


        },

      //地区
           remoteMethod(query) {  
            this.$axios({
              method:'get',
              url: __Config.api.getAddress,
              headers: {
                'Authorization': this.$store.getters.token//设置token 其中K名要和后端协调好
              },
              params:{
                  name:query
              }
              }).then((res)=>{
                   this.addressTM=res.data.data;
              }).then((err)=>{
                  console.log(err)
              })
          },

          //批量上线下线
          onlineOrOfflines(type){
            if(this.radio==null){
               this.$message({
                  message: "至少选择一行数据",
                  type: 'warning'
                });
            }else{
            //不要多选
            //    this.ids=   this.multipleSelection.map(function(item) {
            //      return item.id
            //     })
            //  var arr= this.ids.toString();
            //  let idss = arr.replace(/\[|]/g,'');//移除字符串中的所有[]括号
             let options={
              background:"rgba(0, 0, 0, 0.8)",
              text:"加载中"
            }
            let loadingInstance = Loading.service(options);
             this.$axios({
              method:'post',
              url: __Config.api.getzhishi,
              headers: {
                'Authorization':this.$store.getters.token,
              },
              params:{
                pointId:this.radio,
                type:type
              }
              }).then((res)=>{
                this.radio=null;
                loadingInstance.close();
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
              this.onserch();
              }).catch((err)=>{
                  this.radio=null;
                 loadingInstance.close();
                 this.$message({
                  message: err,
                  type: 'warning'
                });
              })
            }
          },
        
     
          //知识点统计
          getstatisticsData(){
           
               this.$axios({
                method:'post',
                url: __Config.api.getsum,
                headers: {
                  'Authorization':this.$store.getters.token,
                },
                data:{
                startTime:this.StarData,
                endTime:this.endData,
                subject:this.subject,//Array 否 所属学科(key)
                examType:this.examType,//Array 否 考试类型(key)
                level:this.level,//Array 否 学段(key)
                area:this.area,//Array 否 地区(key)
                questionType:this.questionType ,//Array 否 题⽬类型(key)
               // paperType:this.paperType ,//string 试卷类型
              }
              }).then((res)=>{
                this.isshow= true;
                this.getstatisticsList= res.data.data;
                //  console.log(res)
              }).catch((err)=>{
                  console.log(err)
              })
 
         },
     //////////////
     regest(){
        this.selTime=[];
        this.questionType=[];
        this.subject=[];
        this.examType=[];
        this.level=[];
        this.area=[];
        this.onserch();
     }

  }
};
</script>

<style scoped>
.el-radio__inner{
 border-radius:0px !important;
}
.tmindex{
  margin:30px;
}
.el-col-6{

}
.mr30{
  margin-top:30px;
}
tr th{
      text-align: center;
}
</style>
